<template>
    <div class="typefl">
            <ul>
                <li v-for="(item,index) in typelist" :key="index"
                    :class="index==i?'active':''"
                    @click="changeP(item.type_n,index)"
                >

                    {{item.type_name}}
                </li>
            </ul>
    </div>
</template>
<script>
export default {
    data(){
        return { 
            typelist:[],
            i:null
        }
    },
    methods:{
        changeP(type,index){
            this.i = index
            this.$emit('fclick',type)
        }
    },
    mounted(){
        this.i = this.$route.query.i
    }
}
</script>
<style lang="less" scoped>
.typefl{

    .active{
       color: #03a19c;
       border-left: 4px solid #03a19c;
       padding-left: 20px;
    }
}
.typefl li{
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 35px;
}
</style>